﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Dashboard/Dashboard.Master" AutoEventWireup="true" CodeBehind="Statistics.aspx.cs" Inherits="JamesThew.Dashboard.Statistics" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
        google.load("visualization", "1", { packages: ["corechart"] });
        google.setOnLoadCallback(drawChart);
        
        function drawChart() {
            var data = google.visualization.arrayToDataTable([
              ['Plan', 'Amount'],
              ['Monthy', 130],
              ['Yearly', 1500],
        ]);

        var options = {
            title: 'Compare Plans Revenue'
        };

        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    }
    google.setOnLoadCallback(drawChart2);
    function drawChart2() {
        var data = google.visualization.arrayToDataTable([
              ['Plan', 'Registered'],
              ['Monthy', 13],
              ['Yearly', 15],
        ]);

        var options = {
            title: 'Compare Registered User'
        };

        var chart = new google.visualization.PieChart(document.getElementById('chart_div2'));
        chart.draw(data, options);
    }


    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="Main" runat="server">
    <h2>Statistics</h2>

    <div class="row">
        <div class="span5 meta-box well well-small">
            <h5>Right Now</h5>
            
            
            <div class="span2">
                <h6 class="muted">Content</h6>
                <table border="0">
                    <tr>
                        <td><span class="label badge-info"><%= PostData[4] %></span></td>
                        <td><a href="#">Posts</a></td>
                    </tr>
                    <tr>
                        <td><span class="label badge-info"><%= PostData[2] %></span></td>
                        <td><a href="PostManager.aspx?type=recipe">Recipes</a></td>
                    </tr>
                    <tr>
                        <td><span class="label badge-info"><%= PostData[0] %></span></td>
                        <td><a href="PostManager.aspx?type=announcement">Announcements</a></td>
                    </tr>
                    <tr>
                        <td><span class="label badge-info"><%= PostData[1] %></span></td>
                        <td><a href="PostManager.aspx?type=contest">Contests</a></td>
                    </tr>
                    <tr>
                        <td><span class="label badge-info"><%= PostData[3] %></span></td>
                        <td><a href="PostManager.aspx?type=tip">Tips</a></td>
                    </tr>

                </table>
            </div>
            
            <div class="span2">
                <h6 class="muted">Discussion</h6>
                <table border="0">
                    <tr>
                        <td><span class="label badge-info"><%= CommentData[3] %></span></td>
                        <td><a href="#">Comments</a></td>
                    </tr>
                    <tr>
                        <td><span class="label badge-success"><%= CommentData[1] %></span></td>
                        <td><a href="#">Approved</a></td>
                    </tr>
                    <tr>
                        <td><span class="label badge-warning"><%= CommentData[0] %></span></td>
                        <td><a href="#">Pending</a></td>
                    </tr>
                    <tr>
                        <td><span class="label badge-important"><%= CommentData[2] %></span></td>
                        <td><a href="#">Spam</a></td>
                    </tr>
                </table>
            </div>

        </div><!--.meta-box-->

        <div class="span6 meta-box well well-small">
            <h4>Recent Feedbacks</h4>

        </div><!--recent-comments-->

    </div><!--row-->

    <div class="row">
        <div class="span12">

            <h4>Payment Stats</h4>
            <form method="get" class="form-inline" action="Statistics.aspx">
                <input type="text" name="fromdate" class="input-small" placeholder="From Date" />
                <input type="text" name="frommonth" class="input-small" placeholder="From Month" />
                <input type="text" name="todate" class="input-small" placeholder="To Date" />
                <input type="text" name="tomonth" class="input-small" placeholder="To Month" />
                <select name="paymenttype">
                    <option value="">Payment Type</option>
                    <option value="credit_card">Credit Card</option>
                    <option value="bank_transfer">Bank Transfer</option>
                    <option value="direct">Direct</option>
                </select>
                <select name="group">
                    <option value="date">Group the result by</option>
                    <option value="date">Date</option>
                    <option value="month">Month</option>
                </select>
                <input type="submit" name="submit" value="submit" />
            </form>

            <ul class="nav nav-tabs" id="myTab">
              <li><a href="#general" data-toggle="tab">General</a></li>
              <li><a href="#monthy" data-toggle="tab">Monthy Plan</a></li>
              <li><a href="#yearly" data-toggle="tab">Yearly Plan</a></li>
            </ul>
 
            <div class="tab-content">
               <div class="tab-pane active" id="general">
                    <table class="span4 table-general table-bordered table-condensed table-hover table-striped">
                        <thead>
                            <tr>
                                 <th>Plan</th>
                                 <th>Registered</th>
                                 <th>Revenue</th>
                            </tr>
                        </thead>
                        <tbody>
                            <%= GeneralTableData %>
                        </tbody>
                    </table>

                    <div class="span7 chart">
                        <div class="span3 pull-left left" id="chart_div">
            
                        </div>

                        <div class="span3 pull-left left" id="chart_div2">
            
                        </div>
                    </div>
               </div>
              <div class="tab-pane" id="monthy">
                    <table class="table table-condensed table-striped table-hover">
                        <thead>
                            <tr>
                                <th>Year</th>
                                <th>Month</th>
                                <% if (GroupBy == "date")
                                   { %>
                                <th>Date</th>
                                <% } %>
                                <th>Registered</th>
                                <th>Revenue</th>
                            </tr>
                        </thead>
                        <tfoot>
                            <tr>
                                <th>Year</th>
                                <th>Month</th>
                                <% if (GroupBy == "date")
                                   { %>
                                <th>Date</th>
                                <% } %>
                                <th>Registered</th>
                                <th>Revenue</th>
                            </tr>
                        </tfoot>
                        <tbody>
                            <%= MonthyTableData %>
                        </tbody>
                    </table>
              </div>
              <div class="tab-pane" id="yearly">
                    <table class="table table-condensed table-striped table-hover">
                        <thead>
                            <tr>
                                <th>Year</th>
                                <th>Month</th>
                                <% if (GroupBy == "date")
                                   { %>
                                <th>Date</th>
                                <% } %>
                                <th>Registered</th>
                                <th>Revenue</th>
                            </tr>
                        </thead>
                        <tfoot>
                            <tr>
                                <th>Year</th>
                                <th>Month</th>
                                <% if (GroupBy == "date")
                                   { %>
                                <th>Date</th>
                                <% } %>
                                <th>Registered</th>
                                <th>Revenue</th>
                            </tr>
                        </tfoot>
                        <tbody>
                            <%= YearlyTableData %>
                        </tbody>
                    </table>
              </div><!--#yearly-->
              <div class="tab-pane" id="messages">...</div>
              <div class="tab-pane" id="settings">...</div>
            </div>
 
            <script>
                $(function () {
                    $('#myTab a:first').tab('show');
                })
            </script>

        </div>
    </div>
</asp:Content>
